<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_photo_1')">
            <template #right>
                <a class="header-icon-more" @click="moreShow = true" v-show="isMan">
                    <ul class="word-btn-list" v-if="moreShow">
                        <router-link tag="li" :to="{path: '/circle/photo/addPhoto', query: {wcaWcId: wcId}}">{{ $t('circle_photo_2') }}</router-link>
                    </ul>
                </a>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div>
                <van-tabs v-model="active" color="#075ebb" title-active-color="#075ebb" @click="selectType">
                    <van-tab :title="$t('circle_photo_3')"></van-tab>
                    <van-tab :title="$t('circle_photo_4')"></van-tab>
                </van-tabs>
            </div>
            <div style="height: calc(100vh - 100px);" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getPhotoListByWcId"
                    style="padding-bottom: 56px;"
                    >
                        <div v-bind:class="{'height100' : total === 0}">
                            <div class="photo-list">
    <!--                            :class="{'photo-row' : list.length === 1 || (index >= 3 && index + 1 === list.length && (index + 1) % 4 === 0)}"-->
                                <div class="photo-item" v-for="(item, index) in list" @click="toPhotoDetail(item)" :class="{'photo-row' : index + 1 === list.length && (index + 1) % 3 !== 0 && index % 3 === 0}" :key="index"><!--:class="{'photo-row' : index > 3}"-->
                                    <van-image width="100%" height="100%" fit="cover" :src="appUrl + item.wcaImage"></van-image>
                                    <div class="photo-bag"></div>
                                    <div class="photo-info">
                                        <div>{{ item.wcaName }}</div>
                                        <div>
                                            <div>{{ item.wcaCreateDatetime }}</div>
                                            <div>{{ item.authorName }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <div class="mask-white" v-if="moreShow" @click="moreShow = false"></div>
    </div>
</template>

<script>
import { Tab, Tabs, Image } from 'vant';
export default {
    name: 'PhotoList',
    components: {
        vanTab: Tab,
        vanTabs: Tabs,
        vanImage: Image
    },
    data() {
        return {
            active: 0,
            total: 0,
            isTop: false,
            pageNo: 0,
            list: [],
            isLoading: false,
            moreShow: false,
            wcId: this.$route.params.wcId,
            isMan: this.$store.state.circle.circleRole === 'GZLEADER' || this.$store.state.circle.circleRole === 'MANAGER' || this.$store.state.circle.circleRole === 'MEMBER',
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        selectType() {
            if (this.active === 1) {
                let item = {
                    wcaWcId: this.wcId,
                    isMyImg: true
                };
                this.$router.push({path: '/circle/photo/photoDetail', query: item});
            }
        },
        toPhotoDetail(item) {
            item.wcaWcId = this.wcId;
            this.$router.push({path: `/circle/photo/photoDetail`, query: item});
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getPhotoListByWcId('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getPhotoListByWcId(option) {
            this.$axios.get(`/app/api/trainee/work-circle/atlas/${this.wcId}`, {
                params: {
                    pageNo: this.pageNo
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                    } else {
                        this.list = [...this.list, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    },
    created() {
        this.isLoading = true;
        this.onPulldownTop();
    }
};
</script>

<style scoped lang="less">
    .overwrite-title {
        display: flex;
        align-content: center;
        justify-content: center;
        height: 55px;
        line-height: 55px;
        font-size: 18px;
        color: #333;
    }
    .word-btn-list {
        width: 80px;
        padding: 2px 15px;
        background: #ffffff;
        border-radius: 2px;
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 100;
        box-shadow: 0 1px 2px #cccccc;
        text-align: center;
        li {
            // padding: 15px 0;
            border-bottom: 1px solid #e6e6e6;
            font-size: 14px;
            color: #1a1a1a;
            &:nth-last-child(1) {
                border-bottom: 0;
            }
        }
    }
    .mask-white {
        width: 100%;
        height: 100%;
        background: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .header-icon-more {
        position: relative;
    }
    .photo-row {
        width: 100% !important;
    }
    .photo-list {
        display: flex;
        /*align-items: center;*/
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px 15px;
        .photo-item {
            position: relative;
            width: calc(100% / 2 - 5px);
            height: 160px;
            margin-bottom: 10px;
            /deep/.van-image__img {
                border-radius: 5px;
            }
            &:nth-child(3n){
                width: 100%;
            }
            .photo-bag {
                background: rgba(0,0,0,0.2);
                position: absolute;
                left: 0;
                // top: 0;
                width: 100%;
                // height: 100%;
                // border-radius: 5px;
                bottom: 0;
                height: 35%;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }
            .photo-info {
                position: absolute;
                bottom: 0;
                left: 0;
                color: #FBFBFB;
                font-size: 10px;
                width: 100%;
                &>div {
                    font-size: 12px;
                    padding: 0 10px 5px;
                }
                &>div:last-child {
                    padding: 0 10px 15px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }
    }
</style>
